<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /*
      同步>异步代码
      同步>微任务>宏任务
      异步代码
      1. 宏任务： setTimeout, setInterval
      2. 微任务： then,catch,finally
      */
      setTimeout(() => {
        // 异步
        console.log("宏任务：setTimeout 1");
      }, 2000);
      new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log("resolve 1");
          resolve();
        }, 1000);
      })
        .then(() => {
          console.log("微任务：then 2");
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve();
            }, 4000);
          });
        })
        .then(() => {
          console.log("微任务：then 22");
        })
        .catch(() => {
          console.log("微任务：catch 3");
        })
        .finally(() => {
          console.log("微任务：finally 4");
        });
      console.log("同步...");
    </script>
  </body>
</html>
